<template>
  <div>
    <el-button type="success" size="default" :icon="Plus" @click="dialogFormVisible=true">添加</el-button>
  </div>
  <div>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <el-table-column label="编号/类型">
        <template #default="scope">{{ scope.row.id }}<br />{{scope.row.businessId}}</template>
      </el-table-column>
      <el-table-column property="address" label="业务编号/链接地址" prop="businessId" show-overflow-tooltip />
      <el-table-column property="name" label="名称" prop="title" />
      <el-table-column label="图标">
        <template #default="scope">
          <img class="pic" :src="scope.row.picUrl" />
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-button type="success" v-show="scope.row.status==0" plain style="margin:0 auto">启用</el-button>
          <el-button type="danger" v-show="scope.row.status==1" plain style="margin:0 auto">禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link style="margin:0 10px auto">编辑</el-button>
          <el-button type="danger" link style="margin:0 auto" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="toggleSelection([tableData[1], tableData[2]])">批量删除</el-button>
    </div>
    <el-pagination v-model:currentPage="bannerParams.page" v-model:page-size="bannerParams.pageSize"
      :page-sizes="[10,20,30,40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="sizeChange" @current-change="currentChange" />
  </div>
  <el-dialog v-model="dialogFormVisible" title="添加Banner" :key="dialogFormVisible">
    <el-form :model="form" ref="addForm">
      <el-form-item label="自定义类型" prop="type" :rules="[{required:true,message:'不能为空'}]" label-width="100px">
        <el-input v-model="form.type" autocomplete="off" />
      </el-form-item>
      <el-form-item label="业务编号" prop="businessId" :rules="[{ required: true, message: '不能为空' }]" label-width="100px">
        <el-input v-model="form.businessId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称" prop="title" :rules="[{ required: true, message: '不能为空' }]" label-width="100px">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="上传图片" prop="picUrl" label-width="100px">

        <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
          :on-change="handleChange">
          <img style="width:100px;" v-if="form.picUrl" :src="form.picUrl" class="avatar" />
          <el-button v-else type="warning">上传图片</el-button>
        </el-upload>
        <el-input style="display:none;" v-model="form.picUrl" autocomplete="off" />
      </el-form-item>
      <el-form-item label="链接类型" prop="linkType" label-width="100px">
        <el-radio-group v-model="form.linkType" class="ml-4">
          <el-radio label="0" size="large">普通链接</el-radio>
          <el-radio label="1" size="large">小程序</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="链接地址" prop="linkUrl" label-width="100px">
        <el-input v-model="form.linkUrl" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" prop="remark" label-width="100px">
        <el-input v-model="form.remark" type="textarea" :rows="2" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" prop="status" label-width="100px">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio label="0" size="large">显示</el-radio>
          <el-radio label="1" size="large">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="paixu" label-width="100px">
        <el-input v-model="form.paixu" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElTable } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import { bannerList, bannerAdd, bannerRemove } from "../api/banner.js"
import { ElMessage, ElMessageBox } from "element-plus"
import { uploadFile } from "../api/index.js";

let tableData = ref([])
let form = ref({
  type: "",
  businessId: "",
  title: "",
  linkType: "0",
  linkUrl: "",
  remark: "",
  paixu: 0,
  status: "0",
  picUrl: "",
})

let dialogFormVisible = ref(false)
let bannerParams = reactive({
  page: 1,
  pageSize: 10
})
let total = ref(0)
// 翻页
function currentChange(val) {
  bannerParams.page = val
  getBannerList()
}
// 一页几条
function sizeChange(val) {
  bannerParams.page = 1
  bannerParams.pageSize = val
  getBannerList()
}

//文件改变时执行的钩子函数
function handleChange(val) {
  // console.log(val)
  const formData = new FormData();

  formData.append("upfile", val.raw)
  uploadFile(formData).then(res => {
    // console.log(res)
    form.value.picUrl = res.data.url
  })
}

// 删除banner
function remove(id) {
  ElMessageBox.confirm(
    '确认要删除该条数据嘛',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    bannerRemove({ id }).then(res => {
      ElMessage({
        type: 'success',
        message: '删除成功',
        duration:1000
      })
      getBannerList()
    })

  })
}

// 确认-提交

let addForm = ref()
function onSubmit() {
  addForm.value.validate(val => {
    if (val) {
      // 可以提交----调用banner添加的接口
      bannerAdd(form.value).then((res) => {
        if (res.code === 0) {
          dialogFormVisible.value = false;
          ElMessage({
            type: "success",
            message: "添加成功",
          });
          form.value = {
            type: "",
            businessId: "",
            title: "",
            linkUrl: "",
            remark: "",
            linkType: "0",
            paixu: 0,
            status: "0",
            picUrl: "",
          };
          getBannerList();
        }
      });
    }
  })
}

// 获取列表
function getBannerList() {
  bannerList(bannerParams).then(res => {
    // console.log(res)
    if (res.code === 0) {
      tableData.value = res.data.result
      total.value = res.data.totalRow
    }
  })
}

onMounted(() => {
  getBannerList()
})

const multipleTableRef = ref("");
const multipleSelection = ref("");

const handleSelectionChange = ref("");



</script>
<style lang="scss" scoped>
.pic {
  width: 100px;
}

.el-button {
  margin-bottom: 20px;
}

.el-button--text {
  margin-right: 15px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>